<!--  -->
<template>
  <div class="download-arrtibutes-setup">
    <el-table v-loading="tableLoading" :data="gridData" height="480">
      <el-table-column property="title" label="属性名称">
        <template slot-scope="scope">
          {{scope.row.title}}
        </template>
      </el-table-column>
      <el-table-column label="类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 1">序号</span>
          <span v-if="scope.row.type === 2">分类名称</span>
          <span v-if="scope.row.type === 3">下载名称</span>
          <span v-if="scope.row.type === 4">下载项</span>
          <span v-if="scope.row.type === 0" class="orange">自定义</span>
        </template>
      </el-table-column>
      <el-table-column property="proportion" label="宽度比例" width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.proportion === '-1'">自动大小</span>
          <span v-else>{{parseFloat(scope.row.proportion).toFixed(2)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否显示" width="100" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isShow" active-color="#13ce66"
            @change="changeShow(scope.row.id, scope.row.isShow)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="80" align="center" class-name="ord-col">
        <template slot-scope="scope">
          <el-button @click="checkItemDown(scope.row.id)"
            :style="data.findIndex(element=>{return parseInt(scope.row.id) === parseInt(element.id)}) === (data.length -1 ) ? 'visibility:hidden':''"
            type="text"><i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow505':true}"></i></el-button>
          <el-button @click="checkItemUp(scope.row.id)"
            :style="data.findIndex(element=>{return parseInt(scope.row.id) === parseInt(element.id)}) === 0 ? 'visibility:hidden':''"
            type="text"><i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow499':true}"></i></el-button>
        </template>
      </el-table-column>
      <el-table-column property="address" label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button @click="editItem(scope.row.id)" type="text"><span>编辑</span></el-button>
          <el-button :style="scope.row.type !== 0 ? 'visibility:hidden':''" @click="deleteItem(scope.row.id)"
            type="text"><span>删除</span></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加、编辑下载属性 -->
    <SaveDownloadAttr ref="saveDownloadAttr" :resetData="resetData" :system="system" />
  </div>
</template>

<script>
import SaveDownloadAttr from '@/components/main/user/system/downloadAttribute/downloadattributessetup/SaveDownloadAttr.vue'
export default {
  props: {
    dataTotal: {
      type: Function
    },
    system: {
      type: Object
    }
  },
  data () {
    return {
      dialogTableVisible: false,
      // 显示标题
      title: '下载系统属性设置',
      // 是否在加载中
      tableLoading: false,
      // 表格显示数据
      gridData: [],
      // 请求获取的数据
      data: []
    }
  },
  watch: {
    system: {
      handler (newValue) {
        if (newValue.id) {
          this.resetData()
        }
      },
      deep: true
    }
  },
  methods: {
    // 显示列表
    resetData () {
      this.dialogTableVisible = true
      this.tableLoading = true
      // 获取下载系统中的所有属性数据
      this.$post('/system/download/attr-infos', { systemId: this.system.id }).then(response => {
        if (response && response.length > 0) {
          this.data = response
          this.gridData = initGridData(response)
        }
        this.tableLoading = false
      })
    },
    // 修改是否显示
    changeShow (id, isShow) {
      let param = {
        attrId: id, isShow: isShow ? 1 : 0
      }
      this.$post('/system/download/change-attr-show', param).then(response => {
        if (response) {
          let index
          index = this.data.findIndex(element => {
            return parseInt(id) === parseInt(element.id)
          })
          this.data[index].isShow = response.isShow
          this.data = JSON.parse(JSON.stringify(this.data))
          this.gridData = initGridData(this.data)
        }
        this.tableLoading = false
      })
    },
    // 下移
    checkItemDown (id) {
      let param = []
      let index, item1, item2
      index = this.data.findIndex(element => {
        return parseInt(id) === parseInt(element.id)
      })
      item1 = this.data[index]
      item2 = this.data[index + 1]
      if (!item1 || !item2) {
        return
      }
      param.push({
        id: item1.id,
        orderNum: item2.orderNum
      })
      param.push({
        id: item2.id,
        orderNum: item1.orderNum
      })
      this.tableLoading = true
      this.$jpost('/system/download/change-attr-order/' + id, param).then(response => {
        if (response && response.length > 0) {
          this.data = response
          this.gridData = initGridData(response)
        }
        this.tableLoading = false
      })
    },
    // 上移
    checkItemUp (id) {
      let param = []
      let index, item1, item2
      index = this.data.findIndex(element => {
        return parseInt(id) === parseInt(element.id)
      })
      item1 = this.data[index]
      item2 = this.data[index - 1]
      if (!item1 || !item2) {
        return
      }
      param.push({
        id: item1.id,
        orderNum: item2.orderNum
      })
      param.push({
        id: item2.id,
        orderNum: item1.orderNum
      })
      this.tableLoading = true
      this.$jpost('/system/download/change-attr-order/' + id, param).then(response => {
        if (response && response.length > 0) {
          this.data = response
          this.gridData = initGridData(response)
        }
        this.tableLoading = false
      })
    },
    // 创建或者编辑download_attr 属性
    editItem (id) {
      if (parseInt(id) === 0) {
        // 添加
        this.$refs['saveDownloadAttr'].show('新建属性', { id: 0 })
      } else {
        // 编辑
        let item = this.data.find(element => {
          return parseInt(element.id) === parseInt(id)
        })
        if (!item) {
          return
        }
        this.$refs['saveDownloadAttr'].show('编辑属性', item)
      }
    },
    // 删除
    deleteItem (id) {
      let item = this.data.find(element => {
        return parseInt(element.id) === parseInt(id)
      })
      if (!item) {
        return
      }

      this.$confirm('删除属性后，属性数值无法恢复，确认删除 ' + item.title + ' 属性吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$post('/system/download/attr-delete', { attrId: id }).then(response => {
            if (response && response.id && parseInt(response.id) > 0) {
              this.resetData()
            }
          })
        })
        .catch(() => {
        })
    }
  },
  components: {
    SaveDownloadAttr
  }
}

function initGridData (response) {
  return response.map(element => {
    return {
      id: element.id,
      type: element.type,
      isShow: Boolean(element.isShow),
      isSearch: element.isSearch,
      title: element.title,
      proportion: element.proportion
    }
  })
}

</script>

<style scoped lang="scss">
.download-arrtibutes-setup /deep/ .el-table th {
  color: #555;
}
.download-arrtibutes-setup /deep/ .el-table::before{
  display: none;
}
.download-arrtibutes-setup .operation-button {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.download-arrtibutes-setup .ord-col .iconfont{
  font-size: 20px;
  color: #666;
  &:hover{
    color:#258FFB;
  }
}
</style>
